<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../../../../static/layui/css/layui.css" />
	    <link rel="stylesheet" href="../../../component/notiflix/notiflix-2.0.0.css"/>
		<link rel="stylesheet" href="../../../../static/admin/css/pearButton.css"/>
		<link rel="stylesheet" href="../../../../static/admin/css/pearOper.css"/>
		<style>
	    	.pear-container{
	    		background-color: whitesmoke;
	    		margin: 10px;
	    	}
	    </style>
	</head>
	<body class="pear-container">
		
	
		
		<div class="layui-card">
			<div class="layui-card-header">抽屉</div>
			<div class="layui-card-body">
				<div>
					<span>pearOper.drawer("top",".layer-top","30%")</span>
					<br>
					<br>
					<span>pearOper.drawer("bottom",".layer-bottom","30%")</span>
					<br>
					<br>
					<span>pearOper.drawer("left",".layer-left","30%")</span>
					<br>
					<br>
					<span>pearOper.drawer("right",".layer-right","30%")</span>
					<br>
					<br>
				</div>
			 <button class="drawer-top pear-btn pear-btn-primary" plain>上</button>
			 <button class="drawer-bottom pear-btn pear-btn-primary" plain>下</button>
			 <button class="drawer-left pear-btn pear-btn-primary" plain>左</button>
			 <button class="drawer-right pear-btn pear-btn-primary" plain>右</button>
			</div>
		</div>
		
		
	
		<div class="layer-right">
		
		</div>
	    
	   
		
		
		<script src="../../../../static/layui/layui.js"></script>
	    <script>
			layui.use(['element','jquery','pearOper','code'],function(){
				var element = layui.element;
				var $ = layui.jquery;
				var pearOper = layui.pearOper;
				
				var msg = '"Do not try to become a person of success but try to become a person of value." <br><br>- Albert Einstein'
				
				
				$(".drawer-right").click(function(){
					
					pearOper.drawer("right",".layer-right","30%");
				
				})
				
				$(".drawer-left").click(function(){
					
					pearOper.drawer("left",".layer-right","30%");
				
				})
				
				$(".drawer-top").click(function(){
					
					pearOper.drawer("top",".layer-right","30%");
				
				})
				
				$(".drawer-bottom").click(function(){
					
					pearOper.drawer("bottom",".layer-right","30%");
				
				})
			
				
			})
		</script>
	</body>
</html>